<template>
  <wd-card>
    <view class="bodyCard" @click="handleClick">
      <view :class="required?'myCard':''">
        {{title}}
      </view>
      <view style="display: flex;align-items: center">
        <view>
          {{value}}
        </view>
        <wd-icon name="arrow-right"></wd-icon>
      </view>
    </view>
  </wd-card>
</template>
<script setup lang="ts">
const props=defineProps({
  title:String,
  value:Number,
  required:Boolean
})
const emit=defineEmits(['handleExtraInfo'])
function handleClick(){
  emit('handleExtraInfo')
}
</script>


<style scoped lang="scss">
.bodyCard{
  width: 35vw;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.myCard{
  color: #33c759
}
</style>
